<template>
  <div class="resultSheet planeMake">
    <div class="panel plan">
      <div class="panel-title">制定服务计划</div>
      <div class="panel-content plan-meal">
        <div style="margin-bottom:8px;">计划套餐</div>
        <div class="tabs">
          <el-table
            :data="memberUseComboItemDTOs"
            border
            highlight-current-row
            style="width: 100%">
            <el-table-column
              width="55">
              <template scope="scope">
                <el-checkbox v-model="scope.row.checked" @change="chooseCombo(scope.row,scope.row.checked)"></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column
              prop="comboName"
              label="服务套餐"
            >
            </el-table-column>
            <el-table-column
              prop="careLevel"
              label="照护等级"
            >
            </el-table-column>
            <el-table-column
              prop="chargingStandard"
              label="收费标准"
            >
            </el-table-column>
            </el-table-column>
            <el-table-column
              label="服务描述">
              <template scope="scope">
                <div v-html="scope.row.description"></div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="panel-content optional-project">
        <div style="margin-bottom:8px;">自选项目</div>
        <div class="tabs">
          <el-table
            :data="memberUseServiceItemDTOs"
            border
            highlight-current-row
            style="width: 100%">
            <el-table-column
              width="55">
              <template scope="scope">
                <el-checkbox v-model="scope.row.checked" @change="chooseService(scope.row,scope.row.checked)"></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column
              prop="workTime"
              label="服务时间"
            >
            </el-table-column>
            <el-table-column
              prop="periodName"
              label="频次"
            >
            </el-table-column>
            <el-table-column
              prop="chargingStandard"
              label="收费标准"
            >
            </el-table-column>
            <el-table-column
              prop="serviceName"
              label="服务项目"
            >
            </el-table-column>
            <el-table-column
              label="服务描述"
            >
              <template scope="scope">
                <div v-html="scope.row.description"></div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div class="panel free">
      <div class="panel-title">费用收取</div>
      <div class="assessmentInput" v-show="isChange">
        <el-row :gutter="50">
          <el-col :span="8">
            <label class="labelWidth">申请日期</label>
            <el-date-picker
              v-model="dateApply"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-col>
          <el-col :span="8">
            <label class="labelWidth">生效日期</label>
            <el-date-picker
              v-model="form.dateApplication"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-col>
        </el-row>
        <el-row :gutter="50">
          <el-col :span="8">
            <label class="labelWidth">费用合计</label>
            <el-input  v-model="price"  disabled placeholder="请输入费用合计"></el-input>
          </el-col>
          <el-col :span="8">
            <label class="labelWidth">变更原因</label>
            <el-input type="textarea" autosize placeholder="请输入变更原因" v-model="form.remark"></el-input>
          </el-col>
        </el-row>
        <el-row :gutter="50">
          <el-col :span="8">
            <el-button type="primary" class="lightGreenBtn" @click="submitChangePlan">提交修改计划</el-button>
          </el-col>
        </el-row>
      </div>
      <div class="assessmentInput" v-show="!isChange">
        <el-row :gutter="50">
          <el-col :span="8">
            <label class="labelWidth">费用合计</label>
            <el-input v-model="price"  disabled></el-input>
          </el-col>
        </el-row>
        <el-row :gutter="50">
          <el-col :span="8">
            <label class="labelWidth">制定人</label>
            <el-input v-model="user" disabled></el-input>
          </el-col>
        </el-row>
        <el-row :gutter="50">
          <el-col :span="8">
            <label class="labelWidth">制定日期</label>
            <el-date-picker
              type="date"
              v-model="time"
              placeholder="选择日期">
            </el-date-picker>
          </el-col>
        </el-row>
        <el-row :gutter="50">
          <el-col :span="8">
            <el-button type="primary" class="lightGreenBtn"  @click="pendingReview">确认服务计划</el-button>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
  import checkInApi from '../../service/member/checkInApi';
  import packageChangesApi from '../../service/member/packageChangesApi';
  import commonApi from '../../service/member/commonApi';
  import commonJs from '../../config/common';

  export default {
    props:["options","type","other","currentTasId","isChange","runId","member","memberId","way"],
    data(){
      return {
        value1:"",
        input:"",
        radio2:"",
        combo:{comboIds: []},
        service:{serviceIds: []},
        allIds:{comboIds: [],serviceIds: []},
        price:"0",
        user:'',
        time:new Date(),
        memberUseComboItemDTOs: [],
        memberUseServiceItemDTOs: [],
        form:{
          memberId:"",
          dateApplication:new Date(),
          remark:"",
          memberMakeServicePlanDTO:{
            memberId:"",
            comboId:[],
            serviceId:[],
            dateStart:""
          }
        },
        dateApply:new Date()
      }
    },
    methods: {
      init(){
        this.getServiceList();
      },
      /**
       * 获取服务计划套餐列表
       */
      getServiceList(){
        let self = this;
        self.combo.memberId = self.member.memberId;
        commonApi.getServiceList(self.combo).then(function (response) {
          self.memberUseComboItemDTOs = response.body.data.memberUseComboItemDTOs;
          self.memberUseServiceItemDTOs = response.body.data.memberUseServiceItemDTOs;
          self.memberUseComboItemDTOs.forEach(function(combo){
            if(combo.checked){
              self.combo.comboIds.push(combo.comboId);
            }
          });
          self.memberUseServiceItemDTOs.forEach(function(service){
            if(service.checked) {
              self.service.serviceIds.push(service.serviceId);
            }
          });
          commonApi.getServiceList(self.combo).then(function (response) {
            self.memberUseServiceItemDTOs = response.body.data.memberUseServiceItemDTOs;
            //self.getServicePrice();
          });
          self.getServicePrice();
        });

      },
      /**
       * 选择服务套餐
       */
      chooseCombo(row,checked) {
        let self = this;
        if(checked){
          self.combo.comboIds.push(row.comboId);
        }else{
          for(var i=0;i<self.combo.comboIds.length;i++){
            if(self.combo.comboIds[i] === row.comboId){
              self.combo.comboIds.splice(i,1);
            }
          }
        }
        self.combo.memberId = self.member.memberId;
        commonApi.getServiceList(self.combo).then(function (response) {
          self.memberUseServiceItemDTOs = response.body.data.memberUseServiceItemDTOs;
          //self.getServicePrice();
        });
        self.getServicePrice();
      },
      /**
       * 选择自选项目
       */
      chooseService(row,checked){
        let self = this;
        if(checked){
          self.service.serviceIds.push(row.serviceId);
        }else{
          for(var i=0;i<self.service.serviceIds.length;i++){
            if(self.service.serviceIds[i] === row.serviceId){
              delete self.service.serviceIds[i];
            }
          }
        }
        self.getServicePrice();
      },
      /**
       * 计算服务套餐总费用
       */
      getServicePrice() {
        let self = this;
        self.allIds.comboIds = self.combo.comboIds;
        self.allIds.serviceIds = self.service.serviceIds;
        checkInApi.getServicePrice(self.allIds).then(function (response) {
          self.price = response.body.data.price;
          self.user = response.body.data.user;
        })
      },
      /**
       * 提交服务计划
       */
      pendingReview() {
        let self = this;
        self.allIds.comboId = self.combo.comboIds;
        self.allIds.serviceId = self.service.serviceIds;
        self.allIds.memberId = this.member.memberId;
        self.allIds.makePlanDate = commonJs.formatDateTime(this.time);
        if(this.member.actId == undefined ||  self.runId == undefined || self.currentTasId == undefined){
          this.member.actId = 0;
          self.runId = 0;
          self.currentTasId = 0;
        };
        checkInApi.servicePlan(this.member.actId,self.runId,self.currentTasId,self.allIds).then(function (response) {
          self.$message({
            type: 'info',
            message: '制定服务计划成功'
          });
          if(self.way == "externalMemPlan"){
            self.$router.push({name: "homePersonCharge", params: {memberObj: self.member}});
          };
          commonApi.getFlowRouter("inApply",self.member.actId,"save").then(function(response){
            //save代表保存，空值代表下一步
            if(response.body.status==200){
              if(response.body.data.routerKey=='memberCheckIn'){
                self.$router.push({name:"memberCheckIn"});
              }else{
                if(self.member.taskKeyArr.length==1){
                  self.$emit("goto",self.member.taskKeyArr[0]);
                }else{
                  //获取当前任务在数组中的位置
                  if(self.member.taskKeyArr.indexOf("inApply_examination")>=0){
                    self.$emit("goto","inApply_examination");
                  }else if(self.member.taskKeyArr.indexOf("inApply_bedAppointment")>=0){
                    self.$emit("goto","inApply_bedAppointment");
                  }
                }
              }
            }
          });
        })
      },
      /**
       * 提交修改计划
       */
      submitChangePlan(){
        let self = this;
        if (!self.member.memberId){
          self.$message({
            type: 'info',
            message: '请选择会员'
          });
          return false;
        }
        this.form.memberId=self.member.memberId;
        this.form.memberMakeServicePlanDTO.memberId=self.member.memberId;
        self.form.memberMakeServicePlanDTO.comboId = self.combo.comboIds;
        self.form.memberMakeServicePlanDTO.serviceId = self.service.serviceIds;
        self.form.memberMakeServicePlanDTO.dateStart=self.form.dateApplication;
        self.form.price=self.price;
        packageChangesApi.changePlan(self.form).then(function (response) {
          self.$message({
            type: 'info',
            message: '修改服务计划成功'
          });
          self.$router.push({name:"packageChanges"});
        },function(res){
          self.$message({
            type: 'error',
            message: res.data.message
          });
        })
      },
    },
    mounted: function () {
      this.init();
    },
  }
</script>

<style>

  .resultSheet.planeMake{
    padding-left: 0px!important;
    font-size: 14px!important;
  }
  .resultSheet .plan .panel-title{
    margin-top: 30px!important;

  }
  .resultSheet .panel-title{
    width:auto;
  }
  .resultSheet .result .tabs tr{
    background-color:#eef1f6 ;
  }
  .resultSheet .plan-meal .care{
    margin-top:15px;
    margin-bottom:20px;
    width: 350px;
  }

  .resultSheet .panel .fee .synchronize{
    display: inline-block;
    width:300px;
    font-size: 12px;
  }
  .resultSheet .panel .fee .synchronize label{
    margin-bottom:7px;
  }
  .resultSheet .assessmentInput{
    margin-top: 30px;
    padding-left: 15px;
  }
  .resultSheet .assessmentInput label{
    margin-right:7px;
  }
  .resultSheet .assessmentInput .el-row{
    margin-bottom:10px;
  }
  .planeMake .labelWidth{
    display:inline-block;
    width:60px;
  }
</style>
